<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
	    #container{
			width: 100%;
			height: 600px;
			/* background-color: blue; */
			display: flex;
			justify-content: center;
			align-items: center;
		}
		#imgsId{
			display: flex;
			border: red 1px solid;    /* 红色实线1px粗的边框 */
		}
		#imgsId img{
			height: 70px;
			width: 70px;
		}
		#coverId{
			height: 300px;
			width: 420px;
			/* background-color: aqua; */
			overflow: hidden;
			display: flex;
			align-items: center;
		}
	</style>
	<body>
		<div id="container">
			<div id="coverId">
				<div id="imgsId" onmouseleave="leaveImgsId()" onmouseenter="entranceImgsId()">
					<img src="imgs/1.jpeg" >
					<img src="imgs/2.jpeg" >
					<img src="imgs/3.jpeg" >
					<img src="imgs/4.jpeg" >
					<img src="imgs/5.jpeg" >
					<img src="imgs/6.jpeg" >
					<img src="imgs/7.jpeg" >
					<img src="imgs/8.jpeg" >
					<img src="imgs/9.jpeg" >
					<img src="imgs/10.jpeg" >
					<img src="imgs/1.jpeg" >
					<img src="imgs/2.jpeg" >
					<img src="imgs/3.jpeg" >
					<img src="imgs/4.jpeg" >
					<img src="imgs/5.jpeg" >
					<img src="imgs/6.jpeg" >
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	    var imgsIdObject=document.getElementById('imgsId');
		var num=0;
		var mySerInterval='';
		function leaveImgsId(){
			mySerInterval=setInterval(moveDistance,10);
			console.log('离开');
		}
		function entranceImgsId(){
			clearInterval(mySerInterval);
			console.log('进入');
		}
		function moveDistance(){
			num--;
			imgsIdObject.style.marginLeft=num+'px';
			if(num==-700){
				num=0;
			}
			if(num%70==0){
				clearInterval(mySerInterval);
				setTimeout(function(){
					mySerInterval=setInterval(moveDistance,10);
				},1000)
			}
		}
		onload = function(){
			mySerInterval=setInterval(moveDistance,10);
		}
	</script>
</html>
